﻿<br /><div class="ch-container">
    <div class="row">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#secondnav">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="secondnav">
            <ul class="nav navbar-nav navbar-right">
                <li><a data-ng-show="token" href>Wallet: {{userDetail.Wallet | currency}}</a></li>
                <li><a data-ng-show="token" href>Bid Count: {{userDetail.BidCount}}</a></li>
            </ul>
        </div>
        <!-- left menu starts -->
        <div class="col-sm-3 col-lg-3">
            <div class="sidebar-nav" id="secondnav">
                <div class="nav-canvas">
                    <div class="nav-sm nav nav-stacked">
                    </div>
                    <ul class="nav nav-pills nav-stacked main-menu">
                        <li class="nav-header">Main</li>
                        <li>
                            <a class="ajax-link" ng-click="ngUserDashboard();showChangePassword = false;"><i class="glyphicon glyphicon-home"></i><span> Overview</span></a>
                        </li>
                        <li>
                            <a class="ajax-link" ng-click="ngBuyBid();showChangePassword = false;">
                                <i class="glyphicon glyphicon-edit"></i><span> Add Bids</span>
                            </a>
                        </li>
                        <li>
                            <a class="ajax-link" ng-click="ngAddWallet();showChangePassword = false;"><i class="glyphicon glyphicon-font"></i><span> Wallet Funds</span></a>
                        </li>
                        <li>
                            <a class="ajax-link" ng-click="ngUserItemsUnPaid();showChangePassword = false;"><i class="glyphicon glyphicon-list-alt"></i><span> Items List</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- left menu ends -->
        <div class="col-sm-9 col-ld-9">
            <!--User Dashboard Genearl Info-->
            <div ng-hide="dashboard" class="page {{ pageClass }}">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align:center; font-weight:600; font-size:medium; padding-bottom: 0px;"><p>Welcome {{userDetail.FirstName}} {{userDetail.LastName}}!</p></div>
                    <div class="panel-body">
                        <table class="table table-condensed table-striped table-responsive">
                            <tr>
                                <td><img style="height:50px; width:50px;" class=" img-responsive img-thumbnail" ng-src='../App/Images/username.png' /></td>
                                <td>Username: {{userDetail.UserName}}</td>
                            </tr>
                            <tr>
                                <td><img style="height:50px; width:50px;" class=" img-responsive img-thumbnail" ng-src='../App/Images/email.png' /></td>
                                <td>Email: {{userDetail.Email}}</td>
                            </tr>
                            <tr>
                                <td><img style="height:50px; width:50px;" class=" img-responsive img-thumbnail" ng-src='../App/Images/wallet.png' /></td>
                                <td>Wallet: {{userDetail.Wallet | currency}}</td>
                            </tr>
                            <tr>
                                <td><img style="height:50px; width:50px;" class=" img-responsive img-thumbnail" ng-src='../App/Images/bid.jpg' /></td>
                                <td>Bid Count: {{userDetail.BidCount}}</td>
                            </tr>
                            <tr>
                                <td><img style="height:50px; width:50px;" class=" img-responsive img-thumbnail" ng-src='../App/Images/cart.jpg' /></td>
                                <td>Total Payment Due: {{userDetail.InvoiceDue | currency}}<br />Head Over to Items List on the Main Navigation</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td ng-hide="showChangePassword"><button style="text-align:center;width: 157px;padding-left: 5px;height: 38px;padding-right: 5px;margin-right: 10px;" class="btn btn-danger pull-right" ng-click="showChangePassword=true;">Change Password</button></td>
                                <td ng-show="showChangePassword">
                                    <form name="myForm">
                                        <div class="row">
                                            <div class="col-xs-12 form-group">
                                                Current Password: <input ng-model="user.OldPassword" type="password" class="customtextbox form-control" name="Current Password" placeholder="Current Password" />
                                                New Password: <input ng-model="user.NewPassword" type="password" class="customtextbox form-control" name="New Password" data-ng-class="{'ng-invalid':myForm.ConfirmPassword.$error.match}" placeholder="New Password" />
                                                Confirm Password: <input ng-model="user.ConfirmPassword" class="customtextbox form-control" type="password" data-match="user.NewPassword" name="Confirm New Password" placeholder="Confirm Password" />
                                                <div data-ng-show="myForm.ConfirmPassword.$error.match">Passwords do not match!</div>
                                            </div>
                                            <div class="row">
                                                <div class="col-xs-6 form-group">
                                                    <button class="btn btn-success form-control" ng-disabled="myForm.ConfirmPassword.$error.match" ng-click="newPassword(user)">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <!--End User Dashboard-->
            <!--Pay for Items-->
            <div ng-hide="payItems" class="page {{ pageClass }}">
                <div>
                    Items Invoice
                    <button class="btn btn-default" ng-click="flipper()">{{buttonValue}}</button>
                    <table class="table">
                        <thead>
                            <tr><td>Name</td><td>Cost</td><td>Image</td></tr>
                        </thead>

                        <tr ng-repeat="win in wins | filter: checkStatus">
                            <td> {{win.Name}}</td>
                            <td>{{win.Cost}}</td>
                            <td><img ng-src="{{win.Images[0]}}" style="height: 50px;" /></td>
                            <td><a href="#/ItemDetail/{{win.Id}}">View Details</a></td>
                        </tr>
                    </table>
                    <div class="row">
                        <div class="col col-xs-12">
                            <div class="row">
                                <div class="col-sm-2">
                                    Total Due: {{userDetail.InvoiceDue | currency}}

                                </div>
                                <div class="col-sm-2">
                                    <button class="btn btn-success" ng-click="payUserBill()">$ Pay My Balance</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--End Pay For Items-->
            <!--Buy Bids-->
            <div ng-hide="buybids" class="page {{ pageClass }}">
                <div style="font-weight:700; font-size:30px;">Buy Bids</div>
                <div style="font-weight:600; font-size:20px;">Choose Your Package:</div>
                <div class="col-sm-4" ng-repeat="bidamount in buybidamount">
                    <table class="item width2 height2 indextable" style="width: 250px;">
                        <tr>
                            <td style=" padding-top:10px" align="center">
                                <div class="popouthover" style="font-weight:600; font-size:20px;">{{bidamount.Title}}</div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:center">
                                <img ng-src="{{bidamount.Image}}" style="height: 175px; width: 175px;" />
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <div class="popouthover" style="font-weight:600; font-size:20px;">{{bidamount.Price | currency}}</div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:center">
                                <button ng-disabled="bidamount.Price > userDetail.Wallet" style="text-align:center;width: 157px;padding-left: 5px;margin-left: 16.5;margin-left: 12px;height: 38px;padding-right: 5px;margin-right: 10px;" class="btn btn-success popouthoverbtn" ng-click="buyBids(bidamount.BidAmount, bidamount.Price)">Buy Bids</button>
                            </td>
                        </tr>
                        <br />
                    </table>
                </div>
            </div>
            <!--end buy bids-->
            <!--refill wallet-->
            <div ng-hide="addfundstowallet" class="page {{ pageClass }}">
                <div>
                    <div style="font-weight:700; font-size:30px;">Add Funds to Wallet</div>
                    <div style="font-weight:600; font-size:20px;">Choose Amount:</div>
                    <div class="col-sm-6" ng-repeat="fund in walletfunds">
                        <table class="item width2 height2 indextable" style="width: 250px;">
                            <tr>
                                <td style=" padding-top:10px" align="center">
                                    <div class="popouthover" style="font-weight:600; font-size:20px;">{{fund.Amount | currency}}</div>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:center">
                                    <img ng-src="{{fund.Image}}" style="height: 175px; width: 400px;" />
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:center">
                                    <button style="text-align:center;width: 157px;padding-left: 5px;margin-left: 16.5;margin-left: 12px;height: 38px;padding-right: 5px;margin-right: 10px;" class="btn btn-success popouthoverbtn" data-ng-click="addFunds(fund.Amount)">Add Funds $$$</button>
                                </td>
                            </tr>
                            <br />
                        </table>
                    </div>
                </div>
            </div>
            <!--end refill wallet-->

        </div>

    </div>
</div>
